<template>
  <div class="top-statistics-content">
    <div class="statistics-block">
      <div class="statistics-item">
        <div class="label">全区劳动力总量</div>
        <div class="num">2,300,000</div>
      </div>
      <div class="statistics-item">
        <div class="label">已就业人数</div>
        <div class="num">2,300,000</div>
      </div>
    </div>
    <div class="title">保民生&nbsp;&nbsp;、&nbsp;促就业&nbsp;&nbsp;、&nbsp;稳增长</div>
    <div class="statistics-block">
      <div class="statistics-item">
        <div class="label">未就业人数</div>
        <div class="num">2,300,000</div>
      </div>
      <div class="statistics-item">
        <div class="label">失业率</div>
        <div class="num">7%</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopStatistics"
}
</script>

<style lang="scss" scoped>
.top-statistics-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .title{
    width: 600px;
    flex-grow: 0;
    color: #3F8FB3;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .statistics-block{
    width: calc((100% - 600px)/2);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .statistics-item{
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .label{
        color: #D5A43E;
        margin-bottom: 10px;
      }
      .num{
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
</style>
